<template>
    <el-container>
        <el-header height = 200px id = "logo">
            <img src="../../pictures/logo.png" width="200px" height="160px">
        </el-header>
        <el-main>
            <el-form :model="user" :rules="rules" ref="user" label-width="610px" class="demo-user" size="large" width = "100%">
                <el-form-item prop="name">
                    <el-input placeholder="请输入用户名" v-model="user.name"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <el-input placeholder="请确认密码" v-model="user.confirmPassword" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="button-container">
                        <el-button type="primary" size="large" @click="register">
                            <router-link to="/login_in">注册</router-link>
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
export default {
    data() {
      return {
        user: {
          name: '',
          password: '',
          confirmPassword: ''
        },
        rules: {
            name: [
                { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            confirmPassword: [
                { required: true, message: '请确认密码', trigger: 'blur' },
                { validator: this.validateConfirmPassword, trigger: 'blur' }
            ]
        }
      }
    },
    methods: {
        validateConfirmPassword(rule, value, callback) {
            if (value !== this.user.password) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        },
        login() {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    var username = encodeURIComponent(this.user.name);
                    var password = encodeURIComponent(this.user.password);

                    // 构建查询字符串
                    var queryParams = `username=${username}&password=${password}`;
                    var url = `http://localhost/users?${queryParams}`;

                    // 使用 fetch 发送 GET 请求
                    fetch(url, {
                        method: 'POST',
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('Success:', data);
                        window.location.href = 'main.html'; // 注册成功，跳转到登录界面
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        //alert('登录失败: ' + data.msg);
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>

<style>
#logo {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 确保 .el-container 是 flex 容器，如果它不是，可以添加以下样式 */
.el-container {
    display: flex;
    flex-direction: column; /* 使 flex 子项在主轴上为垂直排列 */
    height: 100vh; /* 容器高度为视口的 100% */
}

/* 使 .el-main 也成为 flex 容器，并居中其子元素 */
.el-main {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 限制表单的最大宽度，防止在大屏幕上过宽 */
.demo-user {
    max-width: 800px; /* 可以根据需要调整这个值 */
    width: 100%; /* 表单宽度为 100%，但不会超过 max-width */
}
</style>